<template>
  <div class="count">
    <!-- 导航栏 -->
    <van-nav-bar
      title="指标统计"
    />

    <!-- 健康提要 -->
    <div class="abstract">
      <div class="title">健康提要</div>
      <div class="content">
        <div class="item">
          <div class="name">
            <span class="iconfont">&#xe814;</span>
            健康指数
            <!-- <van-icon name="arrow" /> -->
          </div>
          <div class="comparison">
            健康指数比昨天上升了10%
            <div class="charts">
              <div id="container1"></div>
              <section>vs</section>
              <div id="container2"></div>
            </div>
          </div>
        </div>
        <div class="item">
          <div class="name">
            <span class="iconfont">&#xe7c3;</span>
            优质睡眠
            <!-- <van-icon name="arrow" /> -->
          </div>
          <div class="comparison">
            1月优质睡眠比12月多了5天
            <div class="charts">
              <div id="container3"></div>
              <section>vs</section>
              <div id="container4"></div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 下拉菜单-选择展示的图标样式 -->
    <van-dropdown-menu active-color="#53a8ef">
      <van-dropdown-item v-model="value1" :options="option1" />
      <van-dropdown-item v-model="value2" :options="option2" />
      <van-dropdown-item v-model="value3" :options="option3" />
    </van-dropdown-menu>
    <div id="myChart"></div>
  </div>
</template>
<script>
import { Bar } from '@antv/g2plot';
import { Liquid, RingProgress, measureTextWidth,Column,Line } from '@antv/g2plot';
export default {
  data(){
    return {
      activeKey: 0,
      value1: 1,
      value2: 'a',
      value3: 'a',
      option1: [
        // { text: '全部指标', value: 0 },
        { text: '血压', value: 1 },
        { text: '血脂', value: 2 },
        { text: '血糖', value: 3 },
        { text: '体重', value: 4 },
        { text: '睡眠质量', value: 5 },
      ],
      option2: [
        { text: '三天', value: 'a' },
        { text: '一周', value: 'b' },
        { text: '一月', value: 'c' },
      ],
      option3: [
        { text: '柱状图', value: 'a' },
        { text: '折线图', value: 'b' },
        // { text: '一月', value: 'c' },
      ],

      chartData: [{
          date: '2-7',
          value: 144,
          type: '高压'
        },{
          date: '2-8',
          value: 128,
          type: '高压'
        },{
          date: '2-9',
          value: 117,
          type: '高压'
        },{
          date: '2-7',
          value: 68,
          type: '低压'
        },{
          date: '2-8',
          value: 80,
          type: '低压'
        },{
          date: '2-9',
          value: 70,
          type: '低压'
        }],
      line: {}
    }
  },
  watch:{
    value1(val){
      this.value2 = 'a'
      this.value3 = 'a'
      this.line.destroy()
      if(val=='1'){
        this.chartData = [{
          date: '2-7',
          value: 144,
          type: '高压'
        },{
          date: '2-8',
          value: 128,
          type: '高压'
        },{
          date: '2-9',
          value: 117,
          type: '高压'
        },{
          date: '2-7',
          value: 68,
          type: '低压'
        },{
          date: '2-8',
          value: 80,
          type: '低压'
        },{
          date: '2-9',
          value: 70,
          type: '低压'
        }]
        this.stackBar('mmHg')
      }else if(val=='2'){
        
        this.chartData = [
          {
            date: '2-9',
            type: '总胆固醇TC',
            value: 5.00
          },
          {
            date: '2-9',
            type: '甘油三酯TG',
            value: 1.10
          },{
            date: '2-9',
            type: '高浓度脂蛋白胆固醇HDL-C',
            value: 1.50
          },{
            date: '2-9',
            type: '低浓度脂蛋白胆固醇LDL-C',
            value: 3.30
          },{
            date: '2-8',
            type: '总胆固醇TC',
            value: 4.30
          },
          {
            date: '2-8',
            type: '甘油三酯TG',
            value: 1.18
          },{
            date: '2-8',
            type: '高浓度脂蛋白胆固醇HDL-C',
            value: 1.52
          },{
            date: '2-8',
            type: '低浓度脂蛋白胆固醇LDL-C',
            value: 3.37
          },{
            date: '2-7',
            type: '总胆固醇TC',
            value: 6.20
          },
          {
            date: '2-7',
            type: '甘油三酯TG',
            value: 0.20
          },{
            date: '2-7',
            type: '高浓度脂蛋白胆固醇HDL-C',
            value: 0.60
          },{
            date: '2-7',
            type: '低浓度脂蛋白胆固醇LDL-C',
            value: 3.30
          },
        ]
        
        this.roundCornerBar()
      }else if(val=='3'){
        this.chartData = [
          {
            date: '2-9',
            type: '空腹',
            value: 3.9
          },
          {
            date: '2-9',
            type: '餐后1小时',
            value: 6.7
          },{
            date: '2-9',
            type: '餐后2小时',
            value: 7.8
          },{
            date: '2-8',
            type: '空腹',
            value: 4.5
          },
          {
            date: '2-8',
            type: '餐后1小时',
            value: 7.8
          },{
            date: '2-8',
            type: '餐后2小时',
            value: 4.5
          },{
            date: '2-7',
            type: '空腹',
            value: 4.7
          },{
            date: '2-7',
            type: '餐后1小时',
            value: 8.4
          },
          {
            date: '2-7',
            type: '餐后2小时',
            value: 3.4
          }
        ]
        this.roundCornerBar()
      }else if(val=='4'){
        this.chartData = [
          {
            date: '2-9',
            type: '体重',
            value: 79
          },{
            date: '2-8',
            type: '体重',
            value: 75
          },
          {
            date: '2-7',
            type: '体重',
            value: 78
          }
        ]
        this.stackBar('kg')
      }
    },
    value2(val){
      if(this.value1 == '1'){
        if(val=='a'){
          this.chartData = [{
            date: '2-7',
            value: 120,
            type: '高压'
          },{
            date: '2-8',
            value: 128,
            type: '高压'
          },{
            date: '2-9',
            value: 117,
            type: '高压'
          },{
            date: '2-7',
            value: 68,
            type: '低压'
          },{
            date: '2-8',
            value: 80,
            type: '低压'
          },{
            date: '2-9',
            value: 70,
            type: '低压'
          }]
        }else if(val=='b'){
          this.chartData = [{
            date: '2-3',
            value: 120,
            type: '高压'
          },{
            date: '2-4',
            value: 120,
            type: '高压'
          },{
            date: '2-5',
            value: 120,
            type: '高压'
          },{
            date: '2-6',
            value: 120,
            type: '高压'
          },{
            date: '2-7',
            value: 120,
            type: '高压'
          },{
            date: '2-8',
            value: 128,
            type: '高压'
          },{
            date: '2-9',
            value: 117,
            type: '高压'
          },{
            date: '2-3',
            value: 68,
            type: '低压'
          },{
            date: '2-4',
            value: 44,
            type: '低压'
          },{
            date: '2-5',
            value: 80,
            type: '低压'
          },{
            date: '2-6',
            value: 70,
            type: '低压'
          },{
            date: '2-7',
            value: 68,
            type: '低压'
          },{
            date: '2-8',
            value: 80,
            type: '低压'
          },{
            date: '2-9',
            value: 70,
            type: '低压'
          }]
        }else if(val=='c'){
          this.chartData = [{
            date: '1-11',
            value: 120,
            type: '高压'
          },{
            date: '1-12',
            value: 120,
            type: '高压'
          },{
            date: '1-13',
            value: 120,
            type: '高压'
          },{
            date: '1-14',
            value: 120,
            type: '高压'
          },{
            date: '1-15',
            value: 120,
            type: '高压'
          },{
            date: '1-16',
            value: 120,
            type: '高压'
          },{
            date: '1-17',
            value: 120,
            type: '高压'
          },{
            date: '1-18',
            value: 120,
            type: '高压'
          },{
            date: '1-19',
            value: 120,
            type: '高压'
          },{
            date: '1-20',
            value: 120,
            type: '高压'
          },{
            date: '1-21',
            value: 120,
            type: '高压'
          },{
            date: '1-22',
            value: 120,
            type: '高压'
          },{
            date: '1-23',
            value: 120,
            type: '高压'
          },{
            date: '1-24',
            value: 120,
            type: '高压'
          },{
            date: '1-25',
            value: 120,
            type: '高压'
          },{
            date: '1-26',
            value: 120,
            type: '高压'
          },{
            date: '1-27',
            value: 120,
            type: '高压'
          },{
            date: '1-28',
            value: 120,
            type: '高压'
          },{
            date: '1-29',
            value: 120,
            type: '高压'
          },{
            date: '1-31',
            value: 120,
            type: '高压'
          },{
            date: '2-1',
            value: 128,
            type: '高压'
          },{
            date: '2-2',
            value: 117,
            type: '高压'
          },{
            date: '2-3',
            value: 120,
            type: '高压'
          },{
            date: '2-4',
            value: 120,
            type: '高压'
          },{
            date: '2-5',
            value: 120,
            type: '高压'
          },{
            date: '2-6',
            value: 120,
            type: '高压'
          },{
            date: '2-7',
            value: 120,
            type: '高压'
          },{
            date: '2-8',
            value: 128,
            type: '高压'
          },{
            date: '2-9',
            value: 117,
            type: '高压'
          },{
            date: '1-11',
            value: 36,
            type: '低压'
          },{
            date: '1-12',
            value: 78,
            type: '低压'
          },{
            date: '1-13',
            value: 56,
            type: '低压'
          },{
            date: '1-14',
            value: 56,
            type: '低压'
          },{
            date: '1-15',
            value: 65,
            type: '低压'
          },{
            date: '1-16',
            value: 65,
            type: '低压'
          },{
            date: '1-17',
            value: 67,
            type: '低压'
          },{
            date: '1-18',
            value: 78,
            type: '低压'
          },{
            date: '1-19',
            value: 77,
            type: '低压'
          },{
            date: '1-20',
            value: 68,
            type: '低压'
          },{
            date: '1-21',
            value: 68,
            type: '低压'
          },{
            date: '1-22',
            value: 68,
            type: '低压'
          },{
            date: '1-23',
            value: 68,
            type: '低压'
          },{
            date: '1-24',
            value: 68,
            type: '低压'
          },{
            date: '1-25',
            value: 68,
            type: '低压'
          },{
            date: '1-26',
            value: 68,
            type: '低压'
          },{
            date: '1-27',
            value: 68,
            type: '低压'
          },{
            date: '1-28',
            value: 68,
            type: '低压'
          },{
            date: '1-29',
            value: 68,
            type: '低压'
          },{
            date: '1-31',
            value: 68,
            type: '低压'
          },{
            date: '2-1',
            value: 56,
            type: '低压'
          },{
            date: '2-2',
            value: 56,
            type: '低压'
          },{
            date: '2-3',
            value: 68,
            type: '低压'
          },{
            date: '2-4',
            value: 44,
            type: '低压'
          },{
            date: '2-5',
            value: 80,
            type: '低压'
          },{
            date: '2-6',
            value: 70,
            type: '低压'
          },{
            date: '2-7',
            value: 68,
            type: '低压'
          },{
            date: '2-8',
            value: 80,
            type: '低压'
          },{
            date: '2-9',
            value: 70,
            type: '低压'
          }]
        }
        this.line.changeData(this.chartData)
      }
        
    },
    value3(val){
      this.line.destroy()
      if(val=='a'){
        if(this.value1 == '1'){
          this.stackBar('mmHg')
        }else if(this.value1 == '2'){
          this.roundCornerBar()
        }
      }else if(val=='b'){
         if(this.value1 == '1'){
          this.lineChart('mmHg')
        }else if(this.value1 == '2' || this.value1 == '3'){
          this.lineChart('mmol/L')
        }
      }
    }
  },
  mounted(){
    this.chart1()
  },
  methods:{
    // 水波图
    hydrogram(id,num,name){
      const liquidPlot = new Liquid(document.getElementById(id), {
        percent: num,
        radius: 0.8,
        // 配置
        statistic: {
          // 配置-标题
          title: {
            formatter: () => name,
            style: ({ percent }) => ({
              fill: 'rgba(100,101,102,0.85)',
              fontSize: '14px'
            }),
            offsetY: 65
          },
          // 配置-内容
          content: {
            style: ({ percent }) => ({
              fontSize: 60,
              lineHeight: 1,
              fill: percent > 0.65 ? 'white' : 'rgba(44,53,66,0.85)',
            }),
            customHtml: (container, view, { percent }) => {
              const { width, height } = container.getBoundingClientRect();
              const d = Math.sqrt(Math.pow(width / 2, 2) + Math.pow(height / 2, 2));
              const text = `${(percent * 100).toFixed(0)}%`;
              const textWidth = measureTextWidth(text, { fontSize: 60 });
              const scale = Math.min(d / textWidth, 1);
              return `<div style="width:${d}px;display:flex;align-items:center;justify-content:center;font-size:${scale}em;line-height:${
                scale <= 1 ? 1 : 'inherit'
              }">${text}</div>`;
            },
          },
        },
        liquidStyle: ({ percent }) => {
          return {
            fill: percent > 0.45 ? '#5B8FF9' : '#FAAD14',
            stroke: percent > 0.45 ? '#5B8FF9' : '#FAAD14',
          };
        },
        color: () => '#5B8FF9',
      });
      liquidPlot.render();
    },
    // 迷你环形图
    miniRing(id,num,name){
      const ringProgress = new RingProgress(id, {
        height: 80,
        width: 80,
        // autoFit: false,
        percent: num,
        color: ['#5B8FF9', '#E8EDF3'],
        // 进度条圆角
        progressStyle: { lineCap: 'round', },
        statistic: {
          title: {
            style: { color: 'rgba(100,101,102,0.85)', fontSize: '14px'},
            formatter: () => name,
            // offsetY: '50%'
          },
        },
      });

      ringProgress.render();
    },
    // 血压-堆叠柱状图
    stackBar(units){
      // console.log(this.chartData);
      const stackedColumnPlot = new Column('myChart', {
        data: this.chartData,
        isStack: true,
        xField: 'date',
        yField: 'value',
        yAxis: {
          title: {
            text: units,
            position: 'end',
          },
        },
        columnStyle: (obj)=>{
          if(obj.type == '高压'){
            if(obj.value > 140 || obj.value < 90){
              return {
                fill: '#fc4a55'
              }
            }
          }else{
            if(obj.value < 60 || obj.value > 90){
              return {
                fill: '#fd8662'
              }
            }
          }
        },
        seriesField: 'type',
        label: {
          // 可手动配置 label 数据标签位置
          position: 'middle', // 'top', 'bottom', 'middle'
          // 可配置附加的布局方法
          layout: [
            // 柱形图数据标签位置自动调整
            { type: 'interval-adjust-position' },
            // 数据标签防遮挡
            { type: 'interval-hide-overlap' },
            // 数据标签文颜色自动调整
            // { type: 'adjust-color' },
          ],
        },
      });
      this.line = stackedColumnPlot
      stackedColumnPlot.render();
    },
    // 血压-折线图
    lineChart(units){
      const line = new Line('myChart', {
        data: this.chartData,
        autoFit: true,
        xField: 'date',
        yField: 'value',
        yAxis: {
          title: {
            text: units,
            position: 'end',
            // autoRotate: false,
            // offsetY: -10
          },
        },
        seriesField: 'type',
        color: ({ type }) => {
          if(this.value1 == '1'){
            return type === '高压' ? '#F4664A' : type === '低压' ? '#30BF78' : '#FAAD14';
          }else if(this.value1 == '2'){
            return type === '总胆固醇TC' ? '#6294f9' : type === '甘油三酯TG' ? '#62d9aa' : type === '高浓度脂蛋白胆固醇HDL-C' ? '#647797' : '#f7c122' ;
          }else if(this.value1 == '3'){
            return type === '空腹' ? '#6294f9' : type === '餐后1小时' ? '#62d9aa' : '#647797';
          }
        },
        lineStyle: ({ type }) => {
          if (type === 'register') {
            return {
              lineDash: [4, 4],
              opacity: 1,
            };
          }
          return {
            opacity: 0.5,
          };
        },
      });
      this.line = line
      line.render();
    },
    // 血脂-圆角柱状图
    roundCornerBar(){
        const column = new Column('myChart', {
        data: this.chartData,
        xField: 'date',
        yField: 'value',
        padding: [40,14,20,50],
        yAxis: {
          title: {
            text: 'mmol/L',
            position: 'end',
            // autoRotate: false,
            // offsetY: -10
          },
          label:{
            formatter: (v)=>{
              return Number(v).toFixed(2)
            }
          }
        },
        label: {
          // 可手动配置 label 数据标签位置
          position: 'top', // 'top', 'bottom', 'middle'
          // 可配置附加的布局方法
          layout: [
            // 柱形图数据标签位置自动调整
            { type: 'interval-adjust-position' },
            // 数据标签防遮挡
            { type: 'interval-hide-overlap' },
            // 数据标签文颜色自动调整
            // { type: 'adjust-color' },
          ],
        },
        // meta: {
        //   formatter: (value) => {
        //     console.log(value)
        //   },
        // },
        seriesField: 'type',
        isGroup: 'true',
        columnStyle: {
          radius: [20, 20, 0, 0],
        },
      });
      this.line = column;
      column.render();
    },
    chart1(){
      this.hydrogram('container1',0.59,'2-9（昨天）')
      this.hydrogram('container2',0.69,'2-9（今天）')
      this.miniRing('container3',8/31,'12月')
      this.miniRing('container4',13/31,'1月')

      this.stackBar('mmHg')

      // let data = 0.25;
      // const interval = setInterval(() => {
      //   data += Math.min(Math.random() * 0.1, 0.1);
      //   if (data < 0.75) {
      //     liquidPlot.changeData(data);
      //   } else {
      //     clearInterval(interval);
      //   }
      // }, 500);
    },
    onChange(index) {
      // Notify({ type: 'primary', message: index });
    },
  }
}
</script>
<style lang="less" scoped>
.count{
  padding-bottom: 50px;
  .abstract{
    background-color: #f4f4f4;
    padding: 10px;
    .title{
      margin-bottom: 10px;
    }
    .content{
      // display: flex;
      .item:last-child{
        margin: 0;
      }
      .item{
        margin-bottom: 10px;
        padding: 5px 10px;
        border-radius: 5px;
        background-color: #fff;
        font-size: 0.9rem;
        div{
          padding: 10px 0;
        }
        .name{
          border-bottom: 1px solid #f4f4f4;
        }
        .comparison{
          .charts{
            display: flex;
            justify-content: space-evenly;
            div{
              flex: 5;
              height: 100px;
              // text-align: center;
            }
            section{
              flex: 1;
              text-align: center;
              line-height: 110px;
            }
          }
        }
      }
    }
  }
  #myChart{
    margin: 20px 10px 15px 20px;
    height: 250px;
  }
}
</style>